import { useEffect, useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('张三')

  const changeCount = () => {
    setCount((count) => {
      return count + 1
    })
  }

  const changeName = () => {
    setName((name) => {
      return (name += 'zs')
    })
  }

  // 有依赖项的时候只会页面挂载时执行
  useEffect(() => {
    // 这里是最新值
    console.log('useEffect执行了', count)

    // 1. 卸载时执行
    // 2. 依赖项更新执行
    // 这里是最上一次的值
    return () => console.log('useEffect返回函数执行', count)
  }, [count])

  return (
    <div>
      <h1>{count}</h1>
      <h1>{name}</h1>
      <button onClick={changeCount}>点击+1</button>
      <button onClick={changeName}>修改名字</button>
    </div>
  )
}

export default App
